<script setup lang="ts">
import {
  FormInfo,
  ChartResults,
  FormInfoInput,
  InfoContainer,
  MatchTable
} from "@/views/resourceAccess/components";
import { reactive, ref } from "vue";
import { chartResults, formInfo } from "../components/interface";
const formProps1: formInfo = reactive({
  title: "数据标识",
  btnNames: ["生成数据标识", undefined, undefined],
  btnDisabled: [false, false, false],
  formInfoList: [
    {
      id: 1,
      title: "选择数据集",
      inputType: "0",
      options: [
        {
          value: "选择要分配标识的数据或数据集",
          label: "选择要分配标识的数据或数据集"
        }
      ]
    }
  ]
});
const formProps2: formInfo = reactive({
  formInfoList: [
    {
      id: 2,
      title: "企业名称",
      inputType: "0",
      options: [
        {
          value: "浪潮工业互联网",
          label: "浪潮工业互联网"
        }
      ]
    },
    {
      id: 3,
      title: "应用场景",
      inputType: "0",
      options: [
        {
          value: "个性化定制",
          label: "个性化定制"
        }
      ]
    },
    {
      id: 4,
      title: "边缘网关",
      inputType: "0",
      options: [
        {
          value: "边缘网关01",
          label: "边缘网关01"
        }
      ]
    },
    {
      id: 5,
      title: "设备ID",
      inputType: "0",
      options: [
        {
          value: "设备ID",
          label: "设备ID"
        }
      ]
    },
    {
      id: 6,
      title: "数据类型",
      inputType: "0",
      options: [
        {
          value: "设备状态数据",
          label: "设备状态数据"
        }
      ]
    }
  ]
});
const chartResultsProps: chartResults = reactive({
  header: [],
  result: "优化训练方法比基准训练方法减少平均响应时间40%",
  chartSelect: [0, 1],
  chartData: [
    {
      title: "响应时间",
      legend: ["基准处理方法", "优化处理方法"],
      xAxisName: "时序",
      xAxisData: ["20", "40", "80", "100", "120", "140", "160", "180", "200"],
      yAxisData: undefined, // 一些空属性为undefined来确保编译器检测为chartData下的所有对象都能保持chartInfo类型
      seriesData: [
        {
          name: "基准处理方法",
          data: [2, 2.3, 1.6, 2.41, 2.1]
        },
        {
          name: "优化处理方法",
          data: [1.7, 1.5, 2, 1.9, 2.3]
        }
      ]
    },
    {
      title: "平均响应时间(s)",
      legend: [""],
      xAxisName: undefined,
      xAxisData: undefined,
      yAxisData: ["基准处理方法", "优化处理方法"],
      seriesData: [5.9, 3.5]
    }
  ]
});
// drawer配置
const drawer_props = reactive({
  title: "数据标识配置映射表"
});
const drawerVisible = ref(false);
const tableDatas = reactive([
  {
    colInfo: [
      { labelName: "企业名称", dataProps: ["name"] },
      { labelName: "企业节点标识前缀", dataProps: ["node_id"] }
    ],
    tableData: [
      {
        name: "浪潮",
        node_id: "MA.10000.900000.00000003"
      },
      {
        name: "致景",
        node_id: "MA.10000.900000.00000019"
      }
    ]
  },
  {
    colInfo: [
      { labelName: "企业名称", dataProps: ["sceneCode"] },
      {
        labelName: "支持数字1-9，字母a-z，最多61种编码",
        dataProps: ["introduction"]
      }
    ],
    tableData: [
      {
        sceneCode: "1",
        introduction:
          "浪潮基于协同研发的产品个性化定制场景、济南浪潮智能终端生产基地"
      },
      {
        sceneCode: "2",
        introduction:
          "浪潮基于协同研发的产品个性化定制场景、济南浪潮智能终端生产基地"
      },
      {
        sceneCode: "3",
        introduction:
          "致景基于云边协同的产品质量检测场景，四川宜宾致景纺织智造园"
      }
    ]
  },
  {
    colInfo: [
      { labelName: "边缘网关编码（2位）", dataProps: ["gateCode"] },
      {
        labelName:
          "支持01-99，最多99个边缘网关采集点，如需拓展，可使用字母a-z，A-Z拓展",
        dataProps: ["introduction"]
      }
    ],
    tableData: [
      {
        gateCode: "1",
        introduction: "产线1区采集点"
      },
      {
        gateCode: "2",
        introduction: "产线2区采集点"
      },
      {
        gateCode: "3",
        introduction: "..."
      }
    ]
  },
  {
    colInfo: [
      { labelName: "设备ID编码（8位）", dataProps: ["devCode"] },
      {
        labelName: "设备ID自增表，当设备查询无结果时自动添加",
        dataProps: ["introduction"]
      }
    ],
    tableData: [
      {
        devCode: "00000001",
        introduction: "e_af01c45020934134a5e2b123bd3ea0c1"
      },
      {
        devCode: "00000002",
        introduction: "e_42284b93dfdf42eb9c58b00670845f2b"
      },
      {
        devCode: "00000003",
        introduction: "..."
      }
    ]
  },
  {
    colInfo: [
      { labelName: "数据类型编码（1位）", dataProps: ["id", "state"] },
      {
        labelName: "支持数字1-9，字母a-z，A-Z，最多61种编码",
        dataProps: ["type1_num", "type1_name", "type2_num", "type2_name"]
      }
    ],
    tableData: [
      {
        id: "1",
        state: "设备状态数据",
        type1_num: "2",
        type1_name: "图片",
        type2_num: "3",
        type2_name: "音频"
      },
      {
        id: "4",
        state: "设备状态数据",
        type1_num: "2",
        type1_name: "视频",
        type2_num: "6",
        type2_name: "..."
      }
    ]
  }
]);
const btnClick1 = e => {};
const tableBtnClick = e => {};
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="12" style="min-height: 200px">
      <el-col style="min-height: 200">
        <FormInfo
          :title="formProps1.title"
          :btnNames="formProps1.btnNames"
          :btnDisabled="formProps1.btnDisabled"
          :formInfoList="formProps1.formInfoList"
          @btnClick1="btnClick1"
        >
          <template #afc1>
            <el-contaienr>
              <el-main class="identification-main">
                <div class="mb-[20px]"><span>远程kafka服务器设置</span></div>
                <FormInfoInput
                  v-for="item in formProps2.formInfoList"
                  :key="item.id"
                  :title="item.title"
                  :options="item.options"
                  :inputType="item.inputType"
                />
                <el-col :span="5" :offset="19">
                  <el-button
                    class="afc1-btn"
                    type="primary"
                    @click="drawerVisible = true"
                  >
                    标识配置映射表
                  </el-button>
                </el-col>
              </el-main>
            </el-contaienr>
          </template>
          <template #afc2>
            <el-col class="afc2-input" :span="24">
              <FormInfoInput title="数据标识" inputType="2" />
            </el-col>
          </template>
        </FormInfo>
      </el-col>
    </el-col>
    <el-col :span="12" style="min-height: 200px">
      <el-col style="min-height: 200px">
        <!-- <ChartResults
          :header="chartResultsProps.header"
          :chartSelect="chartResultsProps.chartSelect"
          :chartData="chartResultsProps.chartData"
          :result="chartResultsProps.result"
        /> -->
        <InfoContainer title="原始数据与赋码后数据展示区">
          <el-col class="afc2-input" :span="24">
            <FormInfoInput title="" inputType="2" />
          </el-col>
        </InfoContainer>
      </el-col>
    </el-col>
  </el-row>
  <!-- 这个div用来改el-drawer的样式，不要删 -->
  <div>
    <el-drawer v-model="drawerVisible" :with-header="true" :size="816">
      <!-- 标题 -->
      <template v-slot:header>
        <div class="custom-header">
          <span>{{ drawer_props.title }}</span>
        </div>
      </template>
      <!-- 编辑按钮 -->
      <MatchTable
        v-for="item in tableDatas"
        :colInfo="item.colInfo"
        :tableData="item.tableData"
        @btnClick1="tableBtnClick"
      />
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px !important;
  height: 80px !important;
  border-bottom: 1px solid #ccc !important;
}
:deep(.el-drawer__body) {
  padding-top: 0;
}
.identification-main {
  background-color: rgb(250, 250, 250);
  border-radius: 6px;
  span {
    font-weight: bold;
  }
  .el-col {
    padding: 0px !important;
  }
  .afc1-btn {
    width: 100%;
    margin: 0 !important;
  }
}
.afc2-input {
  margin-top: 1vh;
}

.custom-header {
  background-color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  height: 50px; /* 设置标题栏的高度 */
  line-height: 50px; /* 根据需要设置垂直居中 */
}
</style>
